<template>
  <div>
    <div>子组件</div>
    <!-- <ul>
      <li>{{ $attrs.a }}</li>
      <li>{{ $attrs.b }}</li>
      <li>{{ $attrs.c }}</li>
      <li>{{ $attrs.phone }}</li>
    </ul> -->
    <hr />
    <!-- <son :a="$attrs.a" :b="$attrs.b" :c="$attrs.c" :phone="$attrs.phone" /> -->
    <!-- v-bind加$attrs进行属性透传 -->
    <!-- <son v-bind="{a:100,b:200}" /> -->
    <!-- <son v-bind="$attrs" /> -->
    <!-- 
      透传还要修改，但一定要知道props是单向数据流，不要直接去修改$attrs对象，深复制一个来修改
    -->
    <son v-bind="attrs" />
  </div>
</template>

<script>
import son from './son.vue'
export default {
  // props: ['a']
  components: {
    son
  },
  data() {
    return {
      attrs: {}
    }
  },
  created() {
    // console.log(this.$attrs)
    // 深复制
    this.attrs = { ...this.$attrs }
    this.attrs.phone = '@@' + this.attrs.phone + '@@'
  }
}
</script>

<style lang="scss" scoped></style>
